<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>安手账</title>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="js/vue/2.5.16/vue.min.js"></script>
    <script src="js/axios/0.17.1/axios.min.js"></script>
    <script>
        function checkDeleteLink(){
            var confirmDelete = confirm("确认要删除");
            if(confirmDelete)
                return true;
            return false;
        };
        function checkEmpty(value,text){

            if(null==value || value.length==0){
                alert(text+ "不能为空");
                return false;
            }
            return true;
        };
        $(function(){
            var data4Vue = {
                uri:'types',
                beans: [],
                type:{type: '',uid:''}
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                    this.list();
                },
                methods: {
                    list:function(){
                        var url =  this.uri;
                        axios.get(url).then(function(response) {
                            vue.beans = response.data;
                        });
                    },
                    addType:function () {
                        if(!checkEmpty(this.type.type, "分类名称"))
                            return;
                        var url = this.uri;
                        axios.post(url,this.type).then(function(response) {
                            var result = response.data;
                            if(result.code==0){
                                alert("新增成功");
                                location. reload();
                            }
                            else{
                                $("span.errorMessage").html(result.message);
                                $("div.typeErrorMessageDiv").css("visibility","visible");
                            }
                        });
                    },
                    deleteType: function (id) {
                        if(!checkDeleteLink())
                            return;
                        var url = this.uri+"/"+id;
                        axios.delete(url).then(function(response){
                            if(0!=response.data.length){
                                alert(response.data);
                            }
                            else{
                                vue.list(0);
                            }
                        });
                    },
                }
            });
        });
    </script>
</head>
<body ng-app="app" ng-controller="MainController">
<h1>安手账分类管理</h1>
<div id="workingArea" >
    <div class="listDataTableDiv">
        <div class="typeErrorMessageDiv">
            <div class="alert alert-danger" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                <span class="errorMessage"></span>
            </div>
        </div>
        <table class="table table-striped table-bordered table-hover  table-condensed">
            <thead>
            <tr class="success">
                <th>id</th>
                <th>分类</th>
                <th>编辑</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="bean in beans ">
                <td>{{bean.id}}</td>
                <td>{{bean.type}}</td>
                <td><a :href="'type_list_edit?id=' + bean.id "><span class="glyphicon glyphicon-edit"></span></a></td>
                <td><a href="#nowhere"  @click="deleteType(bean.id)"><span class="glyphicon glyphicon-trash"></span></a></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="panel panel-warning addDiv">
        <div class="panel-heading">新增分类</div>
        <div class="panel-body">
            <table class="addTable">
                <tr>
                    <td>分类名称</td>
                    <td><input  @keyup.enter="addType" v-model.trim="type.type" type="text" class="form-control"></td>
                </tr>

                <tr class="submitTR">
                    <td colspan="2" align="center">
                        <a href="#nowhere"  @click="addType" class="btn btn-success">提交</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>
</html>